<!-- 第二张页面的奖项 -->
<template>
  <dv-border-box-10 :color="['#50649a', '#50649b']">
    <div class="k3">
      <div class="he1">
        <ul>
          <li>
            <dv-border-box-10 class="one shang" :color="['#708CD2', '#708CD2']">
              <p class="ppp1">博士点</p>
              <p class="ppp2"><span>7</span>个</p>
            </dv-border-box-10>
          </li>
          <li>
            <dv-border-box-10 class="one shang" :color="['#708CD2', '#708CD2']">
              <p class="ppp1">硕士点</p>
              <p class="ppp2"><span>12</span>个</p>
            </dv-border-box-10>
          </li>
          <li>
            <dv-border-box-10 class="one shang" :color="['#708CD2', '#708CD2']">
              <p class="ppp1">国家实验室</p>
              <p class="ppp2"><span>2</span>个</p>
            </dv-border-box-10>
          </li>
          <li>
            <dv-border-box-10 class="one shang" :color="['#708CD2', '#708CD2']">
              <p class="ppp1">国家重点学科</p>
              <p class="ppp2"><span>11</span>个</p>
            </dv-border-box-10>
          </li>
          <li>
            <dv-border-box-10 class="one xia" :color="['#708CD2', '#708CD2']">
              <p class="ppp1">双一流学科</p>
              <p class="ppp2"><span>13</span>个</p>
            </dv-border-box-10>
          </li>
          <li>
            <dv-border-box-10 class="one xia" :color="['#708CD2', '#708CD2']">
              <p class="ppp1">A+学科</p>
              <p class="ppp2"><span>17</span>个</p>
            </dv-border-box-10>
          </li>
          <li>
            <dv-border-box-10 class="one xia" :color="['#708CD2', '#708CD2']">
              <p class="ppp1">Esi前1%学科</p>
              <p class="ppp2"><span>1</span>个</p>
            </dv-border-box-10>
          </li>
          <li>
            <dv-border-box-10 class="one xia" :color="['#708CD2', '#708CD2']">
              <p class="ppp1">学术领域前沿</p>
              <p class="ppp2"><span>3</span>个</p>
            </dv-border-box-10>
          </li>
        </ul>
      </div>
      <div class="boss">
        <!-- 图表显示部分 -->
        <div class="ldiv">
          <!-- <h4>学科发展情况</h4> -->
          <div class="leida" ref="lei"></div>
        </div>
        <!-- 风险提示部分 -->
        <div class="rdiv">
          <h4>任务进度风险提示</h4>
          <div class="leida">
            <ul>
              <li>
                <dv-border-box-7 :color="['#50649a', '#50649b']">
                  <span>
                    <i class="el-icon-star-on"></i>
                    任务1：大学习进度存在逾期风险
                  </span>
                </dv-border-box-7>
              </li>
              <li>
                <dv-border-box-7 :color="['#50649a', '#50649b']">
                  <span>
                    <i class="el-icon-star-on"></i>
                    任务2：作业进度存在逾期风险
                  </span>
                </dv-border-box-7>
              </li>
              <li>
                <dv-border-box-7 :color="['#50649a', '#50649b']">
                  <span>
                    <i class="el-icon-star-on"></i>
                    任务3：创业实践存在挂科风险
                  </span>
                </dv-border-box-7>
              </li>
              <li>
                <dv-border-box-7 :color="['#50649a', '#50649b']">
                  <span>
                    <i class="el-icon-star-on"></i>
                    任务4：党课完成度存在不达标风险
                  </span>
                </dv-border-box-7>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </dv-border-box-10>
</template>

<script>
import * as echarts from "echarts";
import { zhuti } from "../assets/index.js";
import pubsub from "pubsub-js";

export default {
  data() {
    return {
      leid: [
        [60, 80, 30, 90, 30],
        [70, 70, 40, 80, 40],
        [30, 60, 50, 95, 20],
        [30, 60, 50, 95, 20],
      ],
      majorInfo: [], //订阅的消息
      doctoralPoint:0, //博士点
      masterPoint:0, //
      lab:0,
      importantSubjectNum:0,
      doubleOneStreamNum:0,
      aPlusSubjectNum:0,
      esiSubject:0,
      frontierDomains:0
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectMajorInfo", (msgName, data) => {
      this.majorInfo = data;
      this.generateRandom();
      this.$nextTick(() => {
        this.initialize();
      });
    });
    this.generateRandom();
    this.$nextTick(() => {
      this.initialize();
    });
  },
  methods: {
    generateRandom() {
      for (let i = 0; i < 4; i++) {
        // 列
        for (let j = 0; j < 5; j++) {
          // 行
          if (i == 0) {
            this.leid[i][j] = Math.floor(Math.random() * (62 - 60 + 1)) + 60;
          } else if (i >= 1 && i <= 3) {
            this.leid[i][j] = Math.floor(Math.random() * (80 - 60 + 1)) + 60;
          } else {
            this.leid[3][j] =
              (this.leid[0][j] + this.leid[1][j] + this.leid[2][j]) / 3;
          }
        }
      }
    },
    initialize() {
      const myChart9 = echarts.init(this.$refs.lei, zhuti);

      const option9 = {
        legend: {
          orient: "vertical",
          x: "left",
          data: ["(1)班", "(2)班", "(3)班", "平均"],
        },
        tooltip: {},

        radar: {
          center: ["50%", "60%"],
          // shape: 'circle',
          indicator: [
            { name: "科研产出", max: 100 },
            { name: "人才培养", max: 100 },
            { name: "国际合作", max: 100 },
            { name: "社会影响", max: 100 },
            { name: "学科总评价", max: 100 },
          ],
        },

        series: [
          {
            name: "学科发展情况",
            type: "radar",
            data: [
              {
                value: this.leid[0],
                name: "(1)班",
              },
              {
                value: this.leid[1],
                name: "(2)班",
              },
              {
                value: this.leid[2],
                name: "(3)班",
              },
              {
                value: this.leid[3],
                name: "平均",
              },
            ],
          },
        ],
      };

      myChart9.setOption(option9);
      window.addEventListener("resize", function () {
        // 改变图表尺寸，在容器大小发生改变时需要手动调用
        myChart9.resize();
      });
    },
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.k3 {
  width: 100%;
  height: 100%;
  transform: scale(0.98);
  /* padding: 10px; */
}
.he1 {
  width: 96%;
  height: 28%;
  padding-top: 2%;
  margin-left: 2%;
  margin-right: 2%;
}
.he1 ul {
  display: flex;
  width: 100%;
  height: 99%;
  margin-top: 1%;
  justify-content: space-between;
  flex-wrap: wrap;
}
.he1 ul li {
  width: 22%;
  height: 45%;
  color: #fff;
  font-size: 16px;
  text-align: left;

  /* background-color: #f0eef5;
  backdrop-filter: blur(5px);
  border-radius: 3%;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3); */
}
.shang,
.xia {
  padding: 10px;
  padding-left: 15px;
  line-height: 8px;
}
.he1 ul li span {
  color: #79e2f9;
  padding-left: 88px;
  font-size: 25px;
  font-weight: bold;
  margin: 5px;
  margin-right: 0px;
}
.clear {
  clear: both;
}
.he1 ul li .shu {
  font-size: 25px;
  font-weight: 700;
}
.boss {
  display: flex;
  width: 100%;
  height: 60%;
  justify-content: space-around;
  margin-top: 10px;
}
.ldiv,
.rdiv {
  flex: 1;
  width: 50%;
}
.ldiv {
  margin: 25px 0 -30px 15px;
  /* background-color: #79E2F9; */
}
.rdiv {
  color: #fff;
  text-align: left;
  margin-left: -20px;
  margin-right: 10px;
}
.rdiv h4 {
  /* margin: 25px 0 -30px 15px; */
  color: #79e2f9;
}
.rdiv i {
  margin-left: 15px;
}
.leida {
  width: 100%;
  height: 90%;
}
.leida ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin-top: 10px;
}
.leida ul li {
  /* position: relative; */
  width: 96%;
  height: 20%;
  line-height: 20%;
  margin: 0 auto;
  margin-bottom: 8px;
  /* background-color: #f0eef5; */
  /* backdrop-filter: blur(5px); */
  border-radius: 3%;
  box-shadow: 2px 2px 2px 2px rgba(255, 255, 255, 0.3);
}
.leida ul li span {
  height: 100%;
  line-height: 190%;
}
/* .leida ul li p {
  font-size: 20px;
  height: 100%;
  line-height: 100%;
} */
.leida ul li i {
  /* position: absolute;
  top: 20%;
  left: 12%; */
  display: inline-block;
  /* float: left; */
  line-height: 190%;
  vertical-align: auto;
  color: #d95850;
}
.one {
  position: relative;
}
.ppp1 {
  float: left;
  position: absolute;
}
.ppp2 {
  float: right;
}
</style>
